<template>
  <div class="dialogWrapper">
    <el-dialog :title="title" v-if="visible" :visible.sync="visible" width="900px" top="5vh" :before-close="handleClose"
      custom-class="check-dialog">
      <div class="content">
        <div class="basic-info">
          <div class="info-header">
            <div class="avator">
              <img :src="consultantInfo.consultantPic" alt="" />
            </div>
            <div class="person-info">
              <div class="name">
                {{ consultantInfo.consultantName }}
                <div class="consultant-type">
                  {{
                    consultantInfo.consultantType === 10
                    ? "内部职业顾问"
                    : "外部职业顾问"
                  }}
                </div>
              </div>
              <div class="info">
                <span v-if="consultantInfo.bday">{{
                  new Date().getFullYear() - consultantInfo.bday.slice(0, 4)
                }}岁</span>
                <div class="vertical-gray"></div>
                <span v-if="!isEdit">{{
                  consultantInfo.sex === "1" ? "男" : "女"
                }}</span>
                <el-select v-if="isEdit" v-model="consultantInfo.sex" placeholder="请选择" style="width:80px">
                  <el-option label="男" value="1"></el-option>
                  <el-option label="女" value="2"></el-option>
                </el-select>
                <div class="vertical-gray"></div>
                <span v-if="!isEdit">{{ consultantInfo.positionName }}</span>
                <el-input v-if="isEdit" v-model="consultantInfo.positionName" style="width:100px"></el-input>
                <div class="vertical-gray"></div>
                <span v-if="!isEdit">{{ consultantInfo.regionName }}</span>
                <el-input v-if="isEdit" v-model="consultantInfo.regionName" style="width:120px"></el-input>
                <div class="vertical-gray"></div>
                <span>生日：<span v-if="!isEdit">{{ consultantInfo.bday }}</span>
                  <el-input type="date" max="2200-12-30" min="1900-01-01" value-format="yyyy-MM-dd" v-if="isEdit"
                    v-model="consultantInfo.bday" style="width:150px"></el-input></span>
              </div>
              <div class="service-score">
                <div class="score-info">
                  <span class="score">{{ consultantInfo.rateScore }}</span>
                  <span class="service-name">服务评分</span>
                </div>
                <div class="vertical-gray-higher"></div>
                <div class="score-info">
                  <span class="score" v-if="!isEdit">{{
                    consultantInfo.serviceCount
                  }}</span>
                  <el-input v-if="isEdit" v-model="consultantInfo.serviceCount" style="width:64px"></el-input>
                  <span class="service-name">服务人数</span>
                </div>
                <div class="vertical-gray-higher"></div>
                <div class="score-info">
                  <span class="score" v-if="!isEdit">{{
                    consultantInfo.workYear
                  }}</span>
                  <el-input v-if="isEdit" v-model="consultantInfo.workYear" style="width:64px"></el-input>
                  <span class="service-name">从业年限</span>
                </div>
              </div>
            </div>
          </div>
          <div class="info-middle">
            <div class="middle-item" style="display:flex">
              <elan-svg icon="goodAt"></elan-svg>
              <span v-if="!isEdit">擅长：{{ showGoodAtList }}</span>
              <span v-if="isEdit">擅长：</span>
              <el-checkbox-group style="width:500px" v-if="isEdit" v-model="goodAtDirection" :min="1" :max="3">
                <el-checkbox v-for="item in goodAtDirections" :label="item" :key="item">{{ item }}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="middle-item">
              <elan-svg icon="phone"></elan-svg>
              <span v-if="!isEdit">联系方式：{{ consultantInfo.servicePhone }}</span>
              <span v-if="isEdit">联系方式：</span>
              <el-form :model="dialogData" ref="dialogData" style="display: inline-block;">
                <el-form-item label="" prop="phone">
                  <el-input v-if="isEdit" placeholder="请输入联系方式" v-model.number="dialogData.phone"
                    oninput="if(value.length>11)value=value.slice(0,11)"
                    onkeyup="this.value = this.value.replace(/[^\d]/g,'');" size="large" clearable style="width:150px">
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
            <div class="middle-item">
              <elan-svg icon="email"></elan-svg>
              <span v-if="!isEdit">邮箱：{{ consultantInfo.serviceMail }}</span>
              <span v-if="isEdit">邮箱：</span>
              <el-form :model="dialogData" ref="dialogData" style="display: inline-block;">
                <el-form-item label="" prop="serviceMail">
                  <el-input clearable v-if="isEdit" v-model="dialogData.serviceMail" style="width:150px"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="info-bottom">
            <span>标签：</span>
            <template v-if="Array.isArray(consultantInfo.consultantTagList)">
              <div class="yljx" v-if="consultantInfo.consultantTagList.includes('一览精选') &&
                !isEdit
                ">
                一览精选
              </div>
              <div class="ptyx" v-if="consultantInfo.consultantTagList.includes('平台优选') &&
                !isEdit
                ">
                平台优选
              </div>
              <div class="jpds" v-if="consultantInfo.consultantTagList.includes('金牌导师') &&
                !isEdit
                ">
                金牌导师
              </div>
            </template>
            <el-checkbox-group v-if="isEdit" style="margin-left:120px" v-model="selectedTags" :min="1" :max="3">
              <el-checkbox v-for="item in tags" :label="item" :key="item">{{
                item
              }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div class="high-rate-topic">
          <div class="topic-title">
            <div class="vertical-orange"></div>
            <div class="title-name">高频咨询话题</div>
          </div>
          <div class="topic" v-for="(item, index) in consultantInfo.highTopicList" :key="index">
            <elan-svg icon="orangejing"></elan-svg>
            <span v-if="!isEdit">{{
              consultantInfo.highTopicList[index]
            }}</span>
            <el-input v-if="isEdit" v-model="consultantInfo.highTopicList[index]" style="width:40%"></el-input>
          </div>
        </div>
        <div class="wechatQrcode-container">
          <div class="wechatQrcode-image-container">

            <img v-if="!isEdit && consultantInfo.wechatQrcode" :src="consultantInfo.wechatQrcode" class="avatar" />
            <el-upload v-else class="avatar-uploader" :action="uploadAction" :show-file-list="false"
              :on-success="handlewechatQrcodeSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="consultantInfo.wechatQrcode" :src="consultantInfo.wechatQrcode" class="avatar" />
              <div v-else-if="isEdit" class="upload-button">
                <i class="el-icon-picture"></i>
                <span>添加</span>
              </div>
            </el-upload>
          </div>
          <div class="wechatQrcode-label">个人企业微信</div>
        </div>
      </div>
      <div class="operation">
        <el-button class="btn" @click="changeEditStatus">修 改</el-button>
        <el-button class="btn" type="primary" @click="confirmChange" v-if="isEdit">确 定</el-button>
        <el-button class="btn" type="primary" @click="handleClose" v-else>取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getApplyConsultantOne,
  updateApplyConsultant,
  uploadImage,
} from "@/api";
export default {
  name: "ConsultantInfo",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    selectedRow: {
      type: Object,
      default: () => { },
    },
  },
  watch: {
    selectedRow: {
      handler(val) {
        this.title = val.consultantName + "信息详情";
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    var checkPhone = (rule, value, callback) => {
      // 手机号验证
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3456789]\d{9}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      uploadAction: "https://upload.yl1001.com/upload/files/save", // 测试环境要换成是https
      title: "",
      consultantInfo: {}, // 顾问个人信息
      showGoodAtList: "", // 擅长展示字段
      tags: ["一览精选", "平台优选", "金牌导师"],
      selectedTags: [], // 已选标签
      goodAtDirection: [],
      goodAtDirections: [
        "职业规划",
        "简历精修",
        "投递指导",
        "面试辅导",
        "薪酬谈判",
        "Offer筛选",
      ],
      isEdit: false, // 修改是否是编辑状态
      dialogData: {
        phone: "",
        serviceMail: "",
      },
      addAddressRules: {
        phone: [
          { required: true, message: "请输入正确手机号", trigger: "blur" },
          { validator: checkPhone, trigger: "blur" },
        ],
        serviceMail: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
        ],
      },
    };
  },

  created() {
    this.getApplyConsultantOne();
  },
  mounted() { },
  methods: {
    beforeAvatarUpload() { },
    handlewechatQrcodeClick() {
      if (!this.isEdit) return;
    },
    handlewechatQrcodeSuccess(data) {
      this.$message({
        type: "success",
        message: "上传成功",
      });
      this.consultantInfo.wechatQrcode = data.data[0];
      console.log(
        "this.consultantInfo.wechatQrcode",
        this.consultantInfo.wechatQrcode
      );

      // this.$refs.form.clearValidate(["photo"]);
    },
    changeEditStatus() {
      this.isEdit = true;
      this.dialogData.phone = this.consultantInfo.servicePhone;
      this.dialogData.serviceMail = this.consultantInfo.serviceMail;
    },
    confirmChange() {
      this.$refs.dialogData.validate((valid) => {
        if (valid) {
          this.updateApplyConsultant();
          this.isEdit = false;
        } else {
          return false;
        }
      });
    },
    async updateApplyConsultant() {
      const params = { ...this.consultantInfo };
      params.servicePhone = this.dialogData.phone;
      params.serviceMail = this.dialogData.serviceMail;
      params.goodAt = this.goodAtDirection.join("|");
      params.consultantTag = this.selectedTags.join("|");
      params.highTopic = this.consultantInfo.highTopicList.join("|");
      params.applyOaId = JSON.parse(
        sessionStorage.getItem("userInfo")
      ).user_source_id;
      const res = await updateApplyConsultant(params);
      if (res.code === 200) {
        this.$message.success("修改成功");
        this.getApplyConsultantOne();
      } else {
        this.$message.error(res.status_desc);
      }
    },
    async getApplyConsultantOne() {
      const params = {
        consultantId: this.selectedRow.consultantId,
      };
      const res = await getApplyConsultantOne(params);
      if (res.code === 200) {
        this.consultantInfo = res.data;
        this.showGoodAtList = this.consultantInfo.goodAtList.join("、");
        this.consultantInfo.goodAtList.forEach((item) => {
          if (!this.goodAtDirections.includes(item)) {
            this.goodAtDirections.push(item);
          }
        });
        // console.log("this.goodAtDirections", this.goodAtDirections);
        this.goodAtDirection = this.consultantInfo.goodAtList;

        this.selectedTags = this.consultantInfo.consultantTagList;
      }
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.dialogWrapper {
  height: 82vh;

  .content {
    position: relative;
    height: 700px;
    background: url("../../../../assets/images/dialogBg.png") no-repeat;
    background-position: center top;
    background-size: 100% 22%;
    padding: 30px 56px;

    .basic-info {
      width: 100%;
      height: 300px;

      .info-header {
        display: flex;

        .avator {
          width: 129px;
          height: 154px;
          border-radius: 9px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 9px;
          }
        }

        .person-info {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          margin-left: 21px;

          .name {
            display: flex;
            flex-direction: row;
            flex-direction: row;
            align-items: center;
            font-family: MicrosoftYaHei, MicrosoftYaHei;
            font-weight: bold;
            color: rgba(0, 0, 0, 0.85);

            .consultant-type {
              width: 112px;
              height: 30px;
              border-radius: 4px;
              border: 1px solid #44ba88;
              color: #44ba88;
              font-size: 16px;
              font-weight: 400;
              margin-left: 18px;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: center;
            }
          }

          .info {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 15px;

            span {
              color: #333333;
              font-size: 15px;
            }

            .vertical-gray {
              width: 1px;
              height: 14px;
              background: #bababa;
              margin: 0 13px;
            }
          }

          .service-score {
            display: flex;
            flex-direction: row;
            margin-top: 15px;

            .score-info {
              width: 80px;
              height: 50px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-between;

              .score {
                font-weight: 800;
                color: #222222;
                font-size: 20px;
              }

              .service-name {
                font-weight: 400;
                color: #666666;
                font-size: 16px;
              }
            }

            .vertical-gray-higher {
              width: 2px;
              height: 42px;
              background: #e6e6e6;
              margin: 0 28px;
            }
          }
        }
      }

      .info-middle {
        margin-top: 40px;
        font-size: 16px;
        display: flex;
        flex-direction: column;

        .middle-item {
          font-weight: 400;
          height: 28px;
          color: #555555;
          margin-bottom: 20px;

          span {
            margin-left: 7px;
          }
        }
      }

      .info-bottom {
        display: flex;
        align-items: center;

        div {
          width: 73px;
          height: 26px;
          border-radius: 2px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 8px;
        }

        .yljx {
          background: #fdefde;
          color: #fb5806;
        }

        .ptyx {
          background: #e2f4df;
          color: #188f3b;
        }

        .jpds {
          background: #ebe9ff;
          color: #4d43aa;
        }

        span {
          font-size: 16px;
          font-family: MicrosoftYaHei;
          color: rgba(0, 0, 0, 0.85);
        }
      }
    }

    .high-rate-topic {
      width: 100%;
      height: 140px;
      margin-top: 80px;
      background-color: #f9f9f9;
      padding: 14px;
      border-radius: 8px;

      .topic-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 12px;

        .vertical-orange {
          width: 3px;
          height: 14px;
          background: #f75a3e;
          border-radius: 2px;
          margin-right: 12px;
        }

        .title-name {
          font-size: 18px;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          color: #222222;
        }
      }

      .topic {
        margin-bottom: 12px;

        span {
          margin-left: 7px;
          font-size: 13px;
        }
      }
    }

    .wechatQrcode-container {
      position: absolute;
      display: flex;
      flex-direction: column;
      right: 56px;
      top: 247px;

      .wechatQrcode-image-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 100px;
        background: #fff;
        box-shadow: 0px 2px 4px 0px rgba(81, 103, 139, 0.5);
        border-radius: 8px;
        padding: 20px;

        img {
          width: 80px;
          height: 80px;
        }
      }

      .wechatQrcode-label {
        margin-top: 10px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #333333;
        line-height: 18px;
        text-align: left;
        font-style: normal;
      }
    }
  }
}

::v-deep .el-dialog__header {
  padding-bottom: 20px;
}

::v-deep .el-dialog__body {
  padding: 0 !important;
}

::v-deep .el-input .el-input__inner {
  height: 28px;
}

.operation {
  width: 100%;
  padding: 15px 0;
  border-top: 1px solid $grey-2;
  background-color: #fff;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
  z-index: 999;
  border-radius: 8px;

  .btn {
    width: 200px;
  }

  ::v-deep .el-button--primary.is-plain,
  .el-button--primary.is-plain {
    background-color: #fff;
    border-color: $primary-color;
  }

  ::v-deep .el-button--primary.is-plain:hover,
  .el-button--primary.is-plain:focus {
    color: $primary-color;
  }
}

::v-deep .check-dialog {
  border-radius: 8px;
}

::v-deep .el-form-item__error {
  position: absolute;
  right: -170px;
  top: 12px;
  left: 180px;
}

::v-deep .el-input__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
</style>
